import Img from './img'

const Intro = () => {
  return (
    <>
      <div className="intro">
        <div className="avatar">
          <Img className="avatar-img" src="images/avatar.jpg" alt="个人头像" />
        </div>
        <p className="description">前端技术博客</p>
      </div>
      <style jsx>{`
      .intro {
        text-align: center;
        padding: 4em 0;
      }
      .avatar {
        display: flex;
        justify-content: center;
      }
      
      `}</style>
      <style jsx global>{`
        .avatar-img {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          overflow: hidden;
          transition: transform .3s ease,border .3s ease;
          border: 4px solid #eaecef;
        }
        .avatar-img:hover {
          position: relative;
          transform: translateY(-0.75em);
          cursor: pointer;
        }
      `}</style>
    </>
  )
}

export default Intro